<template>
  <div class="orders">
    <div style="display: flex; justify-content: space-between">
      <div>
        <el-button type="primary" @click="addOrder" style="margin-bottom: 10px">
          新增订单
        </el-button>
      </div>
      <div style="display: flex">
        <el-select v-model="select" placeholder="是否发货" style="width: 200px;" @change="likeEmployee">
          <el-option label="不排序" :value="0"></el-option>
          <el-option label="按客户名升序" :value="1"></el-option>
          <el-option label="按客户名降序" :value="2"></el-option>
          <el-option label="按版号升序" :value="3"></el-option>
          <el-option label="按版号降序" :value="4"></el-option>
        </el-select>
        <el-date-picker v-model="dates" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-input style="width: 250px" v-model="input" placeholder="输入客户名称,版号,产品名称"></el-input>
        <!-- 搜索 -->
        <el-button icon="el-icon-search" circle style="margin-left: 20px" @click="likeEmployee()"></el-button>
        <el-button style="margin-left: 40px" @click="clearSelect">{{ "重置" }}</el-button>
      </div>
    </div>

    <div class="goods-table">
      <el-table :data="tableData" v-loading="loading" border stripe style="width: 100%" height="100%"
        :row-style="changColor">
        <el-table-column prop="cusNum" label="序号" fit width="50" fixed>
          <!-- 通过素组长度计算 -->
          <template slot-scope="scope">
            {{ serializeNumber(scope.$index + 1) }}
          </template>
        </el-table-column>

        <el-table-column prop="nameId" label="客户名称" fit width="100" fixed v-if="qx">
          <template slot-scope="scope">
            <div>{{ restaurants.find(item => item.id == scope.row.nameId)?.customName ?? "" }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="versionNumber" label="版号" fixed fit width="90">
        </el-table-column>
        <el-table-column prop="productName" label="产品名称" fit width="150" fixed>
        </el-table-column>

        <el-table-column prop="price" label="价格" fit width="55" v-if="qx">
        </el-table-column>
        <el-table-column prop="deliveryTime" label="交货日期" fit width="80">
        </el-table-column>
        <el-table-column prop="isSend" label="是否发货" fit width="80">
          <template slot-scope="scope">
            {{ scope.row.isSend == 0 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column prop="stOne" label="绘图" fit width="120">
          <template slot-scope="scope">
            <div style="width: 100%; height: 100%;display: flex;justify-content: space-between;">
              <div style="height: 100%;">{{ scope.row.stOne }}</div>
              <el-checkbox v-model="scope.row.stOneB" @change="stUpdate(scope.row)"
                v-if="!scope.row.completeOrder"></el-checkbox>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="stTwo" label="切割" fit width="120">
          <template slot-scope="scope">
            <div style="width: 100%; height: 100%;display: flex;justify-content: space-between;">
              <div style="height: 100%;">{{ scope.row.stTwo }}</div>
              <el-checkbox v-model="scope.row.stTwoB" @change="stUpdate(scope.row)"
                v-if="!scope.row.completeOrder"></el-checkbox>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="stThree" label="装刀" fit width="120">
          <template slot-scope="scope">
            <div style="width: 100%; height: 100%;display: flex;justify-content: space-between;">
              <div style="height: 100%;">{{ scope.row.stThree }}</div>
              <el-checkbox v-model="scope.row.stThreeB" @change="stUpdate(scope.row)"
                v-if="!scope.row.completeOrder"></el-checkbox>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="stFour" label="装线" fit width="120">
          <template slot-scope="scope">
            <div style="width: 100%; height: 100%;display: flex;justify-content: space-between;">
              <div style="height: 100%;">{{ scope.row.stFour }}</div>
              <el-checkbox v-model="scope.row.stFourB" @change="stUpdate(scope.row)"
                v-if="!scope.row.completeOrder"></el-checkbox>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="stFive" label="打包" fit width="120">
          <template slot-scope="scope">
            <div style="width: 100%; height: 100%;display: flex;justify-content: space-between;">
              <div style="height: 100%;">{{ scope.row.stFive }}</div>
              <el-checkbox v-model="scope.row.stFiveB" @change="stUpdate(scope.row)"
                v-if="!scope.row.completeOrder"></el-checkbox>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="stSix" label="贴海绵" fit width="120">
          <template slot-scope="scope">
            <div style="width: 100%; height: 100%;display: flex;justify-content: space-between;">
              <div style="height: 100%;">{{ scope.row.stSix }}</div>
              <el-checkbox v-model="scope.row.stSixB" @change="stUpdate(scope.row)"
                           v-if="!scope.row.completeOrder"></el-checkbox>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="surPrice" label="附加费" fit width="70">
          <template slot-scope="scope">
            <div style="width: 100%; height: 100%;display: flex;justify-content: space-between;">
              <div style="height: 100%;">{{ scope.row.surPrice }}</div>
              <el-checkbox v-model="scope.row.surPriceB" @change="stUpdate(scope.row)"
                v-if="!scope.row.completeOrder"></el-checkbox>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="完成情况" prop="completeOrder">
          <template slot-scope="scope">
            <el-button type="text" @click="successOrders(scope)" :disabled="Boolean(scope.row.completeOrder)"
              v-debounce>
              {{ scope.row.completeOrder ? "订单已完成" : "确认完成" }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="count" label="错误原因" fit width="80">
        </el-table-column>
        <el-table-column prop="head" label="负责人" fit width="80">
        </el-table-column>
        <el-table-column prop="triggerSituation" label="处罚情况" fit width="80">
        </el-table-column>
        <el-table-column prop="deliveryId" label="出货单" fit width="80">
        </el-table-column>
        <el-table-column prop="count" label="备注" fit width="80">
        </el-table-column>
        <el-table-column prop="userId" label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="more(scope.row)">
              编辑
            </el-button>
            <el-divider v-if="roleType" direction="vertical"></el-divider>
            <el-button size="mini" type="text" v-if="userInfo.roleId == 1" @click="deleteGoods(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[20, 50, 100]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 查看更多 -->
    <el-dialog style="margin-top: 0" :visible.sync="addFromDialog2" width="74%" :show-close="false" title="更多信息" v-dialogDrag>
      <el-form :model="genduo" :inline="true" ref="genduo" label-width="100px" class="demo-ruleForm">
        <!-- 客户名称 -->
        <el-form-item label="客户名称：" prop="nameId">
          <el-select v-model="genduo.nameId" filterable placeholder="请选择" @focus="querySearchAsync">
            <el-option v-for="item in restaurants" :key="item.id" :label="item.customName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 版号 -->
        <el-form-item label="版号：" prop="versionNumber">
          <el-input type="text" v-model="genduo.versionNumber" placeholder="版号"></el-input>
        </el-form-item>
        <!-- 产品名称 -->
        <el-form-item label="产品名称：" prop="productName">
          <el-input type="text" v-model="genduo.productName" placeholder="产品名称"></el-input>
        </el-form-item>
        <!-- 价格 -->
        <el-form-item label="价格：" prop="price">
          <el-input type="number" v-model="genduo.price" placeholder="价格"></el-input>
        </el-form-item>
        <!-- 交货日期 -->
        <el-form-item label="交货日期" prop="deliveryTime">
          <el-input type="text" v-model="genduo.deliveryTime" placeholder="数量"></el-input>
        </el-form-item>
        <!-- 是否发货 -->
        <el-form-item label="是否发货：" prop="isIncludingTax">
          <el-select v-model="genduo.isSend" placeholder="是否发货">
            <el-option v-for="item in SexCategory" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 绘图 -->
        <el-form-item label="绘图：" prop="stOne">
          <div style="display: flex">
            <el-input type="text" style="font-size: 12px" v-model="genduo.stOne" placeholder="绘图"
              :readonly="true"></el-input>
            <div style="width: 10px"></div>
            <el-checkbox v-model="updateCheck.stOneB" @change="stUpdate()" v-if="!genduo.completeOrder">选择</el-checkbox>
          </div>
        </el-form-item>

        <!-- 切割 -->
        <el-form-item label="切割：" prop="stTwo">
          <div style="display: flex">
            <el-input type="text" style="font-size: 12px" v-model="genduo.stTwo" placeholder="切割"
              :readonly="true"></el-input>
            <div style="width: 10px"></div>
            <el-checkbox v-model="updateCheck.stTwoB" @change="stUpdate()" v-if="!genduo.completeOrder">选择</el-checkbox>
          </div>
        </el-form-item>

        <!-- 装刀 -->
        <el-form-item label="装刀：" prop="stThree">
          <div style="display: flex">
            <el-input type="text" style="font-size: 12px" v-model="genduo.stThree" placeholder="装刀"
              :readonly="true"></el-input>
            <div style="width: 10px"></div>
            <el-checkbox v-model="updateCheck.stThreeB" @change="stUpdate()"
              v-if="!genduo.completeOrder">选择</el-checkbox>
          </div>
        </el-form-item>
        <!-- 装线 -->
        <el-form-item label="装线：" prop="stFour">
          <div style="display: flex">
            <el-input type="text" style="font-size: 12px" v-model="genduo.stFour" placeholder="装线"
              :readonly="true"></el-input>
            <div style="width: 10px"></div>
            <el-checkbox v-model="updateCheck.stFourB" @change="stUpdate()"
              v-if="!genduo.completeOrder">选择</el-checkbox>
          </div>
        </el-form-item>

        <!-- 打包 -->
        <el-form-item label="打包：" prop="stFive">
          <div style="display: flex">
            <el-input type="text" style="font-size: 12px" v-model="genduo.stFive" placeholder="打包"
              :readonly="true"></el-input>
            <div style="width: 10px"></div>
            <el-checkbox v-model="updateCheck.stFiveB" @change="stUpdate()"
              v-if="!genduo.completeOrder">选择</el-checkbox>
          </div>
        </el-form-item>
        <!-- 贴海绵 -->
        <el-form-item label="贴海绵：" prop="stSix">
          <div style="display: flex">
            <el-input type="text" style="font-size: 12px" v-model="genduo.stFive" placeholder="打包"
                      :readonly="true"></el-input>
            <div style="width: 10px"></div>
            <el-checkbox v-model="updateCheck.stFiveB" @change="stUpdate()"
                         v-if="!genduo.completeOrder">选择</el-checkbox>
          </div>
        </el-form-item>
        <!-- 附加费 -->
        <el-form-item label="附加费：" prop="surPrice">
          <div style="display: flex">
            <el-input type="text" style="font-size: 12px" v-model="genduo.surPrice" placeholder="附加费"></el-input>
            <div style="width: 10px"></div>
            <el-checkbox v-model="updateCheck.surPriceB" @change="stUpdate()"
              v-if="!genduo.completeOrder">选择</el-checkbox>
          </div>
        </el-form-item>

        <!-- 错误原因 -->
        <el-form-item label="错误原因：" prop="count">
          <el-input type="text" v-model="genduo.count" placeholder="错误原因"></el-input>
        </el-form-item>

        <!-- 负责人 -->
        <el-form-item label="负责人：" prop="head">
          <el-input type="text" v-model="genduo.head" placeholder="负责人"></el-input>
        </el-form-item>

        <!-- 处罚情况 -->
        <el-form-item label="处罚情况：" prop="triggerSituation">
          <el-input type="text" v-model="genduo.triggerSituation" placeholder="处罚情况"></el-input>
        </el-form-item>

        <!-- 出货单 -->
        <el-form-item label="出货单：" prop="deliveryId">
          <el-input type="text" v-model="genduo.deliveryId" placeholder="出货单"></el-input>
        </el-form-item>

        <!-- 备注 -->
        <el-form-item label="备注：" prop="count">
          <el-input type="text" v-model="genduo.count" placeholder="备注"></el-input>
        </el-form-item>

        <el-form-item label="加急" prop="surPrice">
          <el-select v-model="genduo.urgent" placeholder="是否发货">
            <el-option label="加急" :value="1"></el-option>
            <el-option label="不加急" :value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <!-- //修改按钮，靠右边 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateOrders" :disabled="genduo.completeOrder" v-debounce>
          保 存
        </el-button>
        <el-button @click="addFromDialog2 = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 新增产品 -->
    <el-dialog
      :visible.sync="addFromDialog"
      width="50%"
      :show-close="false"
      :title="title"
      @close="addCloseDialog"
      v-dialogDrag
    >
      <el-form :model="prudproducts" :inline="true" ref="prudproducts" label-width="100px" class="demo-ruleForm">
        <el-form-item label="客户名称：" prop="name">
          <el-select v-model="prudproducts.nameId" filterable placeholder="请选择" @focus="querySearchAsync">
            <el-option v-for="item in restaurants" :key="item.id" :label="item.customName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="版号：" prop="versionNumber">
          <el-input type="text" v-model="prudproducts.versionNumber" placeholder="版号"></el-input>
        </el-form-item>
        <el-form-item label="产品名称：" prop="productName">
          <el-input type="text" v-model="prudproducts.productName" placeholder="产品名称" style="width: 380px"></el-input>
        </el-form-item>
        <el-form-item label="价格：" prop="price">
          <el-input type="number" v-model="prudproducts.price" placeholder="价格"></el-input>
        </el-form-item>

        <el-form-item label="交货日期" prop="deliveryTime">
          <el-input type="text" v-model="prudproducts.deliveryTime"></el-input>
        </el-form-item>

        <el-form-item label="是否发货：" prop="isIncludingTax">
          <el-select v-model="prudproducts.isSend" placeholder="是否发货">
            <el-option v-for="item in SexCategory" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 绘图 -->
        <el-form-item label="绘图：" prop="stOne" style="min-width: 300px;">
          <div style="display: flex">
            <el-checkbox v-model="addCheck.stOneB">选择</el-checkbox>
          </div>
        </el-form-item>

        <!-- 切割 -->
        <el-form-item label="切割：" prop="stTwo" style="min-width: 300px;">
          <div style="display: flex">
            <el-checkbox v-model="addCheck.stTwoB">选择</el-checkbox>
          </div>
        </el-form-item>

        <!-- 装刀 -->
        <el-form-item label="装刀：" prop="stThree" style="min-width: 300px;">
          <div style="display: flex">
            <el-checkbox v-model="addCheck.stThreeB">选择</el-checkbox>
          </div>
        </el-form-item>
        <!-- 装线 -->
        <el-form-item label="装线：" prop="stFour" style="min-width: 300px;">
          <div style="display: flex">
            <el-checkbox v-model="addCheck.stFourB">选择</el-checkbox>
          </div>
        </el-form-item>

        <!-- 打包 -->
        <el-form-item label="打包：" prop="stFive" style="min-width: 300px;">
          <div style="display: flex">
            <el-checkbox v-model="addCheck.stFiveB">选择</el-checkbox>
          </div>
        </el-form-item>

        <!-- 贴海绵 -->
        <el-form-item label="贴海绵：" prop="stSix" style="min-width: 300px;">
          <div style="display: flex">
            <el-checkbox v-model="addCheck.stSixB">选择</el-checkbox>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitaddEmployeeForm" v-debounce>
          确 定
        </el-button>
        <el-button @click="(addFromDialog = false, addCloseDialog())">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {
  createOrder, //创建刀模订单
  getOrderList, //查询刀模订单列表
  updateOrderStatus, //用户修改自己做的订单状态
  updateOrder, //修改订单
  getOrderListByLike, //模糊查询
  selectAllCustom, //查询所有客户
  successOrders,
  deleteOrders,
} from "../../api/die.js";
import user from "../../api/user.js";
// import draggable from 'vuedraggable';

export default {
//   components: {
//     draggable
//   },
  data() {
    return {
      list: [],
      xuhao: [], //序号
      qx: false, //权限
      restaurants: [],
      state: "",
      timeout: null,
      updateCheck: {
        stOneB: false,
        stTwoB: false,
        stThreeB: false,
        stFourB: false,
        stFiveB: false,
        surPriceB: false,
      },
      addCheck: {
        stOneB: false,
        stTwoB: false,
        stThreeB: false,
        stFourB: false,
        stFiveB: false,
        stSixB: false
      },
      //搜索框的值
      input: "",
      select: 4,
      dates: void 0,
      // 图片预览
      srcList: [],
      srcList2: [],
      //新增标题
      title: "新增产品",
      roleType: false,
      cover: "cover",
      // 显示表单
      addFromDialog: false,
      addFromDialog2: false,
      addFromDialog3: false,
      // 表格加载
      loading: false,
      //合同到期提醒
      dialogImageUrl: "",
      dialogVisible: false,
      genduo: "", //查看更多
      //新增订单数据
      prudproducts: {
        nameId: void 0,
        versionNumber: void 0,
        productName: void 0,
        price: void 0,
        deliveryTime: void 0,
        isSend: void 0,
      },
      tableData: [],
      //总数页
      total: 1,
      //是否发货
      SexCategory: [
        { value: 0, label: "是" },
        { value: 1, label: "否" },
      ],
      // 分页大小
      pageSize: 50,
      //记录当前页数
      currentPage: 1,
      //审核通过状态
      applyStatus: false,
      pages: {
        pageSize: 50,
        currentPage: 1,
        total: 1
      },
      userInfo: void 0
    };
  },
  async mounted() {
    //本地缓存查询当前用户权限
    let userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.qx = userInfo.roleId == "10" ? false : true;
    this.userInfo = userInfo
    const res = await selectAllCustom()
    if (res.code) {
      this.restaurants = res.data;
    } else {
      this.$message("查询失败");
    }
    if (userInfo.roleId === "1") {
      this.roleType = true;
    }
    this.getAllGoods();
    //通过入库名称搜索框查询
  },
  //超级管理员显示功能
  methods: {
    deleteGoods(row) {
      deleteOrders(row.id).then(res => {
        this.getAllGoods()
        this.$message(res.message)
      })
    },
    changColor({ row }) {
      let obj = {
        'background-color': 'pink',
        'color': ''
      }
      if (row.completeOrder) {
        obj['background-color'] = 'white'
      }
      if (row.urgent) {
        obj.color = 'red'
      }
      return obj;
    },
    successOrders({ row }) {
      successOrders({ id: row.id }).then(res => {
        this.$message(res.message)
        this.addFromDialog2 = false
        this.getAllGoods();
      })
    },
    // 序号序列化
    serializeNumber(num) {
      if (num < 10) {
        return "00" + num;
      } else if (num < 100) {
        return "0" + num;
      } else {
        return num.toString();
      }
    },
    handleSelect(item) {
      console.log(item);
    },
    // 格式化时间
    formatDate(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = (d.getMonth() + 1).toString().padStart(2, "0");
      const day = d.getDate().toString().padStart(2, "0");
      const hours = d.getHours().toString().padStart(2, "0");
      const minutes = d.getMinutes().toString().padStart(2, "0");
      const seconds = d.getSeconds().toString().padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

      // return `${year}-${month}-${day}`;
    },
    startTimeChange(value) {
      this.addEmployeeForm.startTime = dayjs(value).format(
        "YYYY-MM-DD HH:mm:ss"
      );
    },
    endTimeChange(value) {
      this.addEmployeeForm.endTime = dayjs(value).format("YYYY-MM-DD HH:mm:ss");
    },

    //用户修改自己做的订单状态
    stUpdate(row = undefined) {
      let data = null
      if (row) {
        data = {
          ...row,
          id: row.id
        }
      } else {
        data = {
          ...this.updateCheck,
          id: this.genduo.id
        }
      }
      updateOrderStatus(data).then((data) => {
        if (data.code) {
          this.$message({
            type: "success",
            message: "修改成功",
          });
          //刷新数据
          //关闭弹窗
          this.addFromDialog2 = false;
          this.getAllGoods();
        } else {
          this.$message({
            type: "error",
            message: "修改失败",
          });
        }
      });
    },

    //修改订单
    updateOrders() {
      console.log(this.genduo);
      updateOrder(this.genduo).then((data) => {
        if (data.code) {
          this.$message({
            type: "success",
            message: "修改成功",
          });
          //刷新数据
          this.getAllGoods();
        } else {
          this.$message({
            type: "error",
            message: "修改失败",
          });
        }
      });
    },
    //查看更多
    more(row) {
      this.updateCheck.stOneB = row.stOneB;
      this.updateCheck.stTwoB = row.stTwoB;
      this.updateCheck.stThreeB = row.stThreeB;
      this.updateCheck.stFourB = row.stFourB;
      this.updateCheck.stFiveB = row.stFiveB;
      this.updateCheck.surPriceB = row.surPriceB;
      this.addFromDialog2 = true;
      this.genduo = row;
    },

    async querySearchAsync() {
      const res = await selectAllCustom()
      if (res.code) {
        this.restaurants = res.data;
      } else {
        this.$message("查询失败");
      }
    },
    resetOrderForm(){
    //   this.addFromDialog = true;
      Object.keys(this.prudproducts).forEach(key => {
        this.prudproducts[key] = void 0
      })
        Object.keys(this.addCheck).forEach(key => {
            this.addCheck[key] = false
        })
        // this.$refs.prudproducts.resetFields()
    },
    addOrder(){
        // this.resetOrderForm()
      this.addFromDialog = true;
    //   Object.keys(this.prudproducts).forEach(key => {
    //     if (localStorage.getItem(`die_${key}`)) {
    //       if (key === 'isSend') {
    //         this.prudproducts[key] = Number(localStorage.getItem(`die_${key}`))
    //       } else {
    //         this.prudproducts[key] = localStorage.getItem(`die_${key}`)
    //       }
    //     }
    //   })
    },
    // 新增产品
    async submitaddEmployeeForm() {
      //交货日期
      const res = await createOrder(this.prudproducts)
      if (res.code) {
        this.$message({
          type: "success",
          message: "新增成功",
        });
        if (this.addCheck.stOneB || this.addCheck.stTwoB || this.addCheck.stThreeB || this.addCheck.stFourB || this.addCheck.stFiveB || this.addCheck.stSixB) {
          await updateOrderStatus({...this.addCheck, id: res.data.id})
        }
        this.getAllGoods();
        let isSend = this.prudproducts.isSend;
        // 保存输入值到 localStorage
        Object.keys(this.prudproducts).forEach(key => {
          if (this.prudproducts[key] && key !== "productName" && key !== "price") {
            localStorage.setItem(`die_${key}`, this.prudproducts[key])
          }
        });
        localStorage.setItem(`die_isSend`, isSend);
      } else {
        this.$message({
          type: "error",
          message: "新增失败",
        });
      }
      this.addFromDialog = false;
    },

    //模糊查询信息
    likeEmployee() {
      const data = {
        name: this.input,
        type: this.select,
        page: this.currentPage,
        size: this.pageSize,
        startDate: this.dates?.[0] ?? "",
        endDate: this.dates?.[1] ?? ""
      }
      getOrderListByLike(data).then((res) => {
        if (res.code) {
          this.total = res.data.total
          res.data.dieOrderList.map(async item => {
            const stList = ['stOne', 'stTwo', 'stThree', 'stFour', 'stFive', 'stSix', 'surPrice']
            for (const st of stList) {
              if (item[st] && item[st] != "") {
                const nameList = new Array()
                const list = item[st].split(',')
                for await (const value of list.map(i => user.getUser({ id: i })))
                  nameList.push(value.data.nickName)
                item[st] = nameList.join(",")
                item[st + 'B'] = list.includes(JSON.parse(localStorage.getItem("userInfo")).id)
              } else {
                item[st + 'B'] = false
              }
            }
            console.log(item);
          })
          this.tableData = res.data.dieOrderList;
          let it = 0;
          this.tableData.forEach(() => {
            this.xuhao.push(this.serializeNumber(it++));
          });
        } else {
          this.$message("查询失败");
        }
      });
    },

    //初始化图片
    imgstatus() {
      let url =
        "https://kris-k.oss-cn-hangzhou.aliyuncs.com/kris/c179093a-41b0-4c70-bc1f-6e5973f35c98-jia.png";
      this.imageUrl = url;
      this.imageUrl2 = url;
    },

    // 查询列表
    getAllGoods() {
      if (this.select || this.input || (Array.isArray(this.dates) && this.dates[0] && this.dates[1])) {
        return this.likeEmployee()
      }
      getOrderList(this.pages).then((res) => {
        if (res.code) {
          this.total = res.data.total;
          res.data.dieOrderList.map(async item => {
            const stList = ['stOne', 'stTwo', 'stThree', 'stFour', 'stFive', 'surPrice']
            for (const st of stList) {
              if (item[st] && item[st] != "") {
                const nameList = new Array()
                const list = item[st].split(',')
                for await (const value of list.map(i => user.getUser({ id: i })))
                  nameList.push(value.data.nickName)
                item[st] = nameList.join(",")
                item[st + 'B'] = list.includes(JSON.parse(localStorage.getItem("userInfo")).id)
              } else {
                item[st + 'B'] = false
              }
            }
          })
          this.tableData = res.data.dieOrderList;
          let it = 0;
          this.tableData.forEach(() => {
            this.xuhao.push(this.serializeNumber(it++));
          });
        } else {
          this.$message("列表加载错误");
        }
      });
    },
    // pageSize变化
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getAllGoods();
    },
    // 页码变化
    handleCurrentChange(curPage) {
      this.currentPage = curPage;
      this.getAllGoods();
    },
    addCloseDialog() {
      this.prudproducts.nameId = void 0
      this.prudproducts.versionNumber = void 0
      this.prudproducts.productName = void 0
      this.prudproducts.price = void 0
      this.prudproducts.deliveryTime = void 0
      this.prudproducts.isSend = void 0
      this.addCheck.check1 = false
      this.addCheck.check2 = false
      this.addCheck.check3 = false
      this.addCheck.check4 = false
      this.addCheck.check5 = false
      this.addCheck.check6 = false;
    },
    clearSelect() {
      this.input= ""
      this.select= 0
      this.dates= void 0
      this.getAllGoods()
    }
  },
  directives: {
    dialogDrag: {
      bind(el) {
        const dialogHeaderEl = el.querySelector('.el-dialog__header');
        const dragDom = el.querySelector('.el-dialog');
        dialogHeaderEl.style.cursor = 'move';

        // 获取原有属性 (ie dom元素.currentStyle属性)
        const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);

        dialogHeaderEl.onmousedown = (e) => {
          // 鼠标按下，计算当前元素距离可视区的距离
          const disX = e.clientX - dialogHeaderEl.offsetLeft;
          const disY = e.clientY - dialogHeaderEl.offsetTop;

          // 获取到的值带px 正则匹配替换
          let styL, styT;

          // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
          if (sty.left.includes('%')) {
            styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
            styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
          } else {
            styL = +sty.left.replace(/\px/g, '');
            styT = +sty.top.replace(/\px/g, '');
          }

          document.onmousemove = function(e) {
            // 通过事件委托，计算移动的距离
            const l = e.clientX - disX;
            const t = e.clientY - disY;

            // 移动当前元素
            dragDom.style.left = `${l + styL}px`;
            dragDom.style.top = `${t + styT}px`;
          };

          document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    }
  },
};
</script>

<style scoped>

::v-deep .el-dialog {
  margin-top: 15vh; 
  width: 50%; 
  left: 172px; 
  top: -4px;
}


.orders {
  height: 100%;
}

.page {
  text-align: center;
}

.nameBox {
  overflow: auto;
  /* 显示滚动条 */
  z-index: 99;
  margin-top: 5px;
  font-size: 12px;
  text-align: center;
  width: 205px;
  height: 170px;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
  position: absolute;
}

.goods-table {
  height: 94%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.imgUrl {
  width: 100px;
  height: 100px;
  object-fit: cover;
  /* 保持原始宽高比，填充容器 */
}

.htimg {
  width: 150px;
  height: 150px;
  object-fit: cover;
  /* 保持原始宽高比，填充容器 */
}

.el-table::v-deep tbody tr:hover>td {
  background-color: transparent !important;
}

.el-table::v-deep tbody tr>td {
  background-color: transparent !important;
}

.el-dialog__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
}

.el-dialog {
  position: absolute;
  margin: 0 auto !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
